<template>
  <div class="header">
    <div class="personBox">
      <div class="yonghu">
        <i class="iconfont icon-yonghu" v-if="!image"></i>
        <img class="headImage" v-else :src="getImageUrl(image)" />
        <span class="loginName">{{ username }}</span>
      </div>
      <div class="list">
        <span class="title">个人中心</span>
        <span class="logout" @click="logout">退出登录</span>
      </div>
    </div>
    <div class="colloction">
      <div class="viewList">
        <router-link to="/Person/personCollectionPage">收藏</router-link>
        <router-link to="/Person/personManage">个人</router-link>
      </div>
    </div>
    <div class="toHome">
      <span @click="toHome">返回首页</span>
    </div>
  </div>
</template>
  
  <script>
import { mapState } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState("login", ["username", "image"]),
  },
  methods: {
    getImageUrl(imageName) {
      const prefix = this.$imagePrefix;
      console.log(prefix);
      return `${prefix}${imageName}`;
    },
    toHome() {
      this.$router.push({ name: "Home" });
    },
    logout() {
      this.$confirm("确认要退出登录吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        customClass: "set_custom_class",
        closeOnClickModal: false,
        type: "warning",
      })
        .then(() => {
          localStorage.clear();
          sessionStorage.clear();
          this.$router.push({ name: "login" });
          this.$message({
            type: "success",
            message: "已成功退出登录!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出登录",
          });
        });
    },
  },
};
</script>
  
  <style scoped>
.header {
  display: flex;
  background: rgba(42, 81, 77, 1);
  height: 80px;
  position: sticky;
  top: 0;
  z-index: 1;
}
.personBox {
  display: inline-block;
  flex-shrink: 0;
  width: 300px;
  /* line-height: 70px; */
  vertical-align: middle;
  text-align: center;
  color: #fff;
}
.yonghu {
  display: inline-block;
  width: 80px; 
  line-height: 40px;
  height: 80px;
  vertical-align: middle;
  flex-shrink: 0;
  text-align: center;
  color: #fff;
}
.loginName {
  display: block;
  font-size: 14px;
  width: 80px;
  height: 10px;
  line-height: 10px;
  text-align: center;
  margin: 0px auto;
}
.headImage {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.icon-yonghu{
  color: #fff;
  font-size: 45px;
}
.list {
  display: inline-block;
  font-size: 12px;
  width: 90px;
  height: 80px;
  text-align: start;
}
.list span {
  display: inline-block;
  height: 40px;
}
.list span:nth-child(1) {
  font-size: 20px;
  font-weight: bold;
  transform: translateY(15px);
}
.list span:nth-child(2) {
  padding-left: 2px;
  height: 20px;
  transform: translateY(20px);
}
.colloction {
  display: flex;
  width: 1000px;
  font-size: 25px;
  font-family: "楷体";
  height: 50px;
  line-height: 50px;
  justify-content: center;
  align-items: center;
  background: rgba(42, 81, 77, 1);
}
.viewList {
  width: 300px;
  line-height: 50px;
  height: 50px;
  margin: 0px auto;
}
.colloction a {
  display: inline-block;
  margin: 20px 0px;
  width: 120px;
  border: 1px solid #ffffff;
  border-radius: 20px;
  /* color: rgba(42,81,77, 1); */
  text-align: center;
  height: 40px;
  line-height: 40px;
  color: #fff;
}
.router-link-active {
  color: rgba(42, 81, 77, 1) !important;
  background: #fff;
}
.colloction a:nth-child(1) {
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
}
.colloction a:nth-child(2) {
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.toHome {
  display: inline-block;
  width: 250px;
  font-size: 20px;
  font-family: "楷体";
  height: 50px;
  line-height: 50px;
  background: rgba(42, 81, 77, 1);
}
.toHome span {
  display: block;
  margin: 20px auto;
  width: 150px;
  border: 1px solid #ffffff;
  border-radius: 20px;
  color: rgb(255, 255, 255);
  text-align: center;
  height: 40px;
  line-height: 40px;
  background: rgba(42, 81, 77, 1);
}
.toHome span:hover {
  cursor: pointer;
  background: rgb(59, 111, 106);
}
</style>